<template>
    <div style="width:390px;height:844px;">
        <div style="width:360px;margin-left:15px;margin-bottom:10px;display:flex;margin-top:20px;">
            <div style="margin-top:20px;">
                <el-icon @click="onClickLeft"><ArrowLeft /></el-icon>
            </div>
            <div>
                <form action="/">
  <van-search
    ref="searchInputRef"              
    v-model="searchKeyword"
    show-action
    placeholder="请输入搜索关键词"
   
  >
  <template #action>
                        <div style="width:50px;height:30px;border-radius:15px;text-align:center;line-height:30px;background-color:#f57c00;color:white;" @click="onSearch">搜索</div>
                    </template>
                </van-search>

</form>

            </div>
            <div style="margin-top:20px;margin-left:15px"><el-icon size="18"><Reading /></el-icon></div>
            <div style="margin-top:20px;margin-left:10px"><van-icon name="chat-o" dot size="18" /></div>
        </div>
        
        <div style="width:360px;margin-left:15px;height:25px;display:flex;justify-content: space-between;margin-bottom:15px;">
            <div v-for="i in she" :key="i.id" :class="{ actives: selects === i.id}"
            @click="handleClick(i.id)"  class="yy" >
                {{ i.name }}
            </div>
        </div>
        <div style="width:360px;margin-left:15px;height:calc(844px - 190px)">
            <div v-for="i in filteredItems" :key="i.id" style="height:130px;display:flex;justify-content:space-evenly;margin-bottom:10px">
                <div><img :src="i.img" style="width:130px;height:90px"  @click="goToDetail(i)"></div>
                <div style="margin-left:10px;">
                  
                  <p style="margin-bottom:10px;margin-top: -4px;">{{ i.zhi }}</p>
                  <p style="font-size:12px;margin-bottom:10px">{{ i.hu ==0 ? '1':i.hu==1 ? '2':i.hu==2 ? '3':''}}室 45.15m*{{ i.name }}</p>
                  <div style="margin-bottom:10px;color:#7d8abc;background-color:#edeff6;font-size:10px;width:34px;text-align:center">{{ i.you == 1 ? '邻地铁':i.you == 2 ? "有阳台":i.you == 3 ? '有电梯':i.you == 4 ? '精装修':'' }}</div>
                  <p style="color:#f57c00"><span style="font-weight:700">{{ i.price }}</span>元/月</p>
                </div>
            </div>
            </div>
    </div>
  </template>
  
  <script setup lang="ts">
import {ref,computed,onMounted} from 'vue'
import axios from '../../axios'
import { Search } from '@element-plus/icons-vue'
import {useRouter,useRoute} from 'vue-router'
const route=useRoute()
const router = useRouter();
const searchKeyword = ref(route.query.keyword as string || '');
const searchInputRef = ref<HTMLInputElement | null>(null);
const she=ref([
    {id:1,name:"邻地铁"},
    {id:2,name:"有阳台"},
    {id:3,name:"有电梯"},
    {id:4,name:"精装修"},
])
const onClickLeft = () => history.back()
const selects=ref<number | null>(null)
const handleClick=(selectId: number)=>{
  selects.value=selectId
}
if(she.value.length > 0){
  selects.value = she.value[0].id
}
let shou=ref([])
const getshou = ()=>{
  axios.get('/shou',{params:{name:searchKeyword.value,zhi:searchKeyword.value}}).then(
    res=>{
      shou.value=res.data.shou
    }
  )
}

const filteredItems = computed(()=>{
  if(selects.value === null){
    return shou.value
  }
  return shou.value.filter(item=>item.you===selects.value)
})
const goToDetail = (item:any) => {
 localStorage.setItem('detailData',JSON.stringify(item))
  router.push({ path:'/xiang'});
};
const onSearch = () => {
    getshou();
};

onMounted(() => {
  if (searchInputRef.value) {
        searchInputRef.value.focus();
    }
    getshou();
});
  </script>
  
  <style scoped>
.yy{
    width:40px;
    height:20px;
    font-size:10px;
    text-align:center;
    color:gray;
    line-height: 20px;
    background-color:#efefef;
}
.actives{
    color:#f57c00;
    background-color:#fef2e6;
}
  </style>